<%@page import="id.co.gomobile.assessment.Item"%>

<g:set var="index" value="${(currentPage-1) * assignment.test.preference.maxQuestionsPerPage}"/>
<div class="items">
    <table border="0" width="100%">
        <col width="20" />
        <col />
        <tbody>
        <g:each in="${items}" status="i" var="itemInstance">
            <tr><td colspan="2">
                <h3>Question ${index+i+1} of ${assignment.items.size()}</h3>
            </td></tr>
            <tr>
                <td valign="top" colspan="2">${itemInstance?.item?.text}<br/></td>
            </tr>
            <g:if test="${itemInstance?.item?.category}">
            <tr>
                <td valign="top" colspan="2"><div class="notes">Category: ${itemInstance?.item?.category}</div><br/></td>
            </tr>
            </g:if>
            <g:each in="${itemInstance?.item?.options}" status="ii" var="itemOptionInstance">
            <g:if test="${itemInstance?.item?.type() == Item.MULTIPLE_ANSWER}">
            <tr>
                <td>
                <% def answered = itemInstance.answers.find { it.id == itemOptionInstance?.id }; %>
                <g:checkBox name="item[${itemInstance?.id}]" value="${itemOptionInstance?.id}" checked="${answered ? true : false}" onchange="if(this.checked) { addAnswer(${itemInstance?.id},${itemOptionInstance?.id}) } else { removeAnswer(${itemInstance?.id},${itemOptionInstance?.id}) }"></g:checkBox>
                </td>
                <td>${itemOptionInstance?.text}</td>
            </tr>
            </g:if>
            <g:else>
            <tr>
                <td>
                <% def answered = itemInstance.answers.find { it.id == itemOptionInstance?.id }; %>
                <g:radio name="item[${itemInstance?.id}]" value="${itemOptionInstance?.id}" checked="${answered ? true : false}"  onclick="setAnswer(${itemInstance?.id},${itemOptionInstance?.id})"></g:radio>
                </td>
                <td>${itemOptionInstance?.text}</td>
            </tr>
            </g:else>
            </g:each>
            <tr><td colspan="2">&nbsp;</td></tr>
        </g:each>
        </tbody>
    </table>
</div>
